<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>组件通信</title>
    <style type="text/css">
        header { margin: 15px 0; border-bottom: 1px solid #dfdfdf; }
        .wrapper { border: 1px solid gold; }
        .cart { margin: 15px ; border: 1px solid blue ; width: 80vw; }
        .item { display: flex ; margin: 15px ; border: 1px solid gray; }
        .item:hover { background: #efefef; }
        .item>span { flex-basis: 15% ; }
        .item>span:nth-child(2) { flex-basis: 25%; }
    </style>
</head>

<body>

    <header>
        <a href="index.html">返回首页</a>
    </header>

    <div id="root"></div>

    <script src="vue.global.js"></script>

    <script>

        const CartItem = {
            props: [ 'item' , 'count' ],
            template: `<div>
                            <span>{{ count }}</span>
                            <span>{{ item.name }}</span>
                            <span>{{ item.price }}</span>
                            <span>{{ item.number }}</span>
                            <span>{{ item.price * item.number }}</span>
                            <span>
                                <a @click.stop="handler">点我试试</a>
                            </span>
                       </div>`,
            methods: {
                handler(){
                    console.log( 'this: ' , this );
                    console.log( 'this.$parent: ' , this.$parent );
                    console.log( 'this.$parent.$parent: ' , this.$parent.$parent );
                    console.log( 'root: ' , this.$root );
                    console.log( 'root.$parent: ' , this.$root.$parent );
                }
            }
        }

        const ShoppingCart = {
            template: `<div @click.stop="handler">
                           <cart-item class="item" 
                                      v-for="(ci,index) in cartItems" 
                                      :item="ci" 
                                      :count="index+1"
                                      :ref=" 'child' + index ">
                           </cart-item>
                       </div>`,
            data(){
                return {
                    cartItems: [
                        { id: 101 , name: '红米10A' , price: 699 , number: 1 },
                        { id: 202 , name: '魅蓝10' , price: 899 , number: 1 },
                        { id: 303 , name: '荣耀X10' , price: 1899 , number: 1 }
                    ]
                }
            },
            methods: {
                handler(){
                    console.log( this.$refs );
                    console.log( this.$refs.child0 );
                    console.log( this.$refs.child1 );
                    console.log( this.$refs.child2 );
                }
            },
            components: {
                'cart-item': CartItem
            }
        }

        const options = {
            template: `<div class="wrapper">
                          <p>这是{{username}}的购物车</p>
                          <shopping-cart class="cart"></shopping-cart>
                       </div>`,
            data(){
                return { username: 'Resp Jone'}
            },
            components: {
                'shopping-cart': ShoppingCart
            }
        }

        const app = Vue.createApp(options);
        const root = app.mount('#root');
        console.log( root );
    </script>

</body>

</html>